<template>
  <div style="margin-top: 30px;">
    <span style="margin-top: 30px;">剩余水票为:</span>
    <span>{{ this.updateCustomerForm.custTicket }}</span>
  </div>
  <el-container>
    <el-button type="primary" @click="openDialog">下单</el-button>
  </el-container>
  <el-container>
    <el-table :data="orderList" empty-text="当前无未送达订单，请下单">
      <el-table-column prop="id" label="订单编号">
      </el-table-column>
      <el-table-column prop="workerId" label="送水人">
        <template #default="scope">
          <span v-if="scope.row.version"> 订单已取消 </span>
          <span v-else-if="scope.row.workerId"> {{ scope.row.workerId }} </span>
          <span v-else> 无人接单 </span>
        </template>
      </el-table-column>
      <el-table-column prop="sendWaterTime" label="送达时间">
        <template #default="scope">
          <span v-if="scope.row.version"> 订单已取消 </span>
          <span v-else-if="scope.row.sendWaterTime"> {{ scope.row.sendWaterTime}} </span>
          <span v-else-if="scope.row.workerId && scope.row.sendWaterTime == null"> 送货中 </span>
          <span v-else> 无人接单 </span>
        </template>
      </el-table-column>
      <el-table-column prop="sendWaterCount" label="送水数量">

      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" v-if="scope.row.sendWaterTime">已送达</el-button>

          <el-button type="danger" @click="cancelOrder(scope.row.id)" v-else-if="scope.row.version == null">取消订单</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-container>
  <el-container>
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[5,10,20,30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>
  </el-container>

  <el-dialog title="添加订单" v-model="visible" width="30%">
    <el-form :model="orderForm" label-width="100px">
      <el-form-item label="送水数量">
        <el-input-number v-model="orderForm.sendWaterCount" :min="1"></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="addOrder">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {mapState} from "vuex";
export default {
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      orderList: [],
      addOrderList: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      visible: false,
      orderForm: {
        sendWaterCount: 1, // 初始化送水数量为1
      },
      updateDialogFormVisible: true,
      name,
      // 修改客户表单
      updateCustomerForm: {
        id: '',
        custName: '',
        custAddress: '',
        custMobile: '',
        custTicket: '',
        account:'',
      },
    };
  },
  methods: {
    getOrderList() {
      this.$axios.post("http://localhost:8091/customer/getOrderWithoutFinish", {
        "pageNum": this.pageNum,
        "pageSize": this.pageSize,
        "params": {
          "name": this.user.userName
        }
      }).then(res => {
        let code = res.data.code;
        if (code === 200) {
          this.orderList = res.data.data.records;
          this.total = res.data.data.total;
        } else {
          // this.$message.error("当前无订单");
        }
      }).catch(err => {
        console.log("获取订单失败", err);
        this.$message.error("获取订单失败");
      })
    },
    addOrder() {
      this.$axios.post("http://localhost:8091/customer/addOrder",{
        "customerName": this.user.userName,
        "count": this.orderForm.sendWaterCount
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success("添加订单成功");
          this.visible = false; // 关闭对话框
          this.getOrderList(); // 刷新订单列表
          this.preUpdateCustomer();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(err => {
            console.log("添加订单失败", err);
            this.$message.error("添加订单失败");
          });
    },
    openDialog() {
      this.visible = true;
    },
    cancelOrder(id) {
      this.$axios.post("http://localhost:8091/customer/cancelOrder?id="+id)
        .then(res => {
          console.log("取消订单");
          console.log(res);
          if (res.data.code == 200) {
            this.$message.success("取消订单成功");
            this.getOrderList();
            this.preUpdateCustomer();
          } else {
            this.$message.error("取消订单失败");
          }
        })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getOrderList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getOrderList();
    },
    preUpdateCustomer() {
        console.log(this.name);
        this.$axios
            .get(`http://localhost:8091/customer/getName?name=${this.name}`)
            .then(resp => {
              let code = resp.data.code;
              if (code === 200) {
                this.updateCustomerForm = resp.data.data;
                console.log(this.updateCustomerForm);
              } else {
                this.$message.error("数据回显失败");
              }
            })
            .catch(err => {
              console.log("预修改客户请求发送失败 ", err);
              this.$message.error("预修改客户请求发送失败 ", err);
            });
        this.updateDialogFormVisible = true;
      },
  },
  created() {
    this.name = this.user['userName'];
    this.preUpdateCustomer();
    this.getOrderList();
  }
}
</script>


<style scoped lang="less">

</style>